import { useState, useRef, useContext, useEffect, useLayoutEffect } from "react"

const MlContext = React.createContext();
const { Provider, Consumer } = MlContext;

// ref写在类组件上，得到组件实例
// ref写在函数式组件上，报错，使用ref转发，转发到了函数式组件中的dom标签上

const Child = props => {
  let box1 = useRef();
  let box2 = useRef();
  let fn = () => {
    console.log(box1.current);
    console.log(box2.current);
  }
  return (
    <div>
      <h3>函数式组件</h3>
      <h4 ref={box1}>我是一个h4</h4>
      <h5 ref={box2}>我是一个h5</h5>
      <button onClick={() => fn()}>点我</button>
    </div>
  )
}



const A = props => {
  return (
    <Provider value={"1000万"}>
      <div>
        <h2>函数式组件</h2>
        <hr />
        <Child></Child>
      </div>
    </Provider>
  )
}

export default A;
